<template>
  <div class="coordinate-block">
    <div class="coordinate-item">E {{longitude}}</div>
    <div class="coordinate-item">N {{latitude}}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import MapCommon from '@/util/MapCommon';
@Component({
  mixins: [MapCommon],
})
export default class Coordinate extends Vue {
  private longitude: string = '114';
  private latitude: string = '41';

  private mounted() {
    (this as any).resolveMap('map').then((data: any) => {
    //
    this.getComponent().on('mousePosition', this.onMousePosition, this);
    });
  }

  private beforeDestroy() {
  this.getComponent().off('mousePosition', this.onMousePosition, this);
  }

  private onMousePosition(event: any) {
    this.longitude = event.x;
    this.latitude = event.y;
  }

  private getComponent() {
    const temp: any = this;
    const GISComponents = temp.$ioc.resolve('GISModules-map');
    const gisToolComponent = GISComponents.common.getComponent('GISToolComponent');
    gisToolComponent.load();
    return gisToolComponent.mousePosition;
  }
}
</script>

<style lang="less" scoped>
.coordinate-block {
  display: flex;
  position:absolute;
  bottom:20px;
  left:25px;
	padding: 5px 10px;
	width: max-content;
	background-color:rgba(44, 80,125,.5);
	.coordinate-item {
		font-size: 14px;
		color: #fff;
		&+.coordinate-item {
			border-left: 1px solid #fff;
			margin-left: 5px;
			padding-left: 5px;
		}
	}
}
</style>